<script setup>
import { toast } from '@/utils/elnotification';
import { ref, reactive } from 'vue'

const activeName = ref('first')

const tableData = [{
    name: "支付宝支付",
    desc: "该系统支持即时到账接口",
    src: "http://shopadmin.dishawang.com/alipay.png",
    key: "alipay"
}, {
    name: "微信支付",
    desc: "该系统支持微信网页支付和扫码支付",
    src: "http://shopadmin.dishawang.com/wepay.png",
    key: "wxpay"
}]

const form = reactive({
    "close_order_minute": 30,
    "auto_received_day": 7,
    "after_sale_day": 23,
    "alipay": {
        "app_id": "****已配置****",
        "ali_public_key": "****已配置****",
        "private_key": "****已配置****"
    },
    "wxpay": {
        "app_id": "****已配置****",
        "miniapp_id": "****已配置****",
        "secret": "****已配置****",
        "appid": "****已配置****",
        "mch_id": "****已配置****",
        "key": "****已配置****",
        "cert_client": "****已配置****.pem",
        "cert_key": "****已配置****.pem"
    },
})


</script>

<template>
    <el-card shadow="never" class="border-0">
        <el-tabs v-model="activeName">
            <el-tab-pane label="支付设置" name="first">
                <el-table :data="tableData" border stripe>
                    <el-table-column label="支付方式" align="left">
                        <template #default="{ row }">
                            <div class="flex items-center">
                                <el-image :src="row.src" fit="fill" :lazy="true" style="width:40px;height: 40px;"
                                    class="rounded mr-2"></el-image>
                                <div>
                                    <h6>{{ row.name }}</h6>
                                    <small class="flex text-gray-500 mt-1">{{ row.desc }}</small>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150">
                        <template #default="{ row }">
                            <el-button type="primary" size="small" text @click="toast('演示环境', 'error')">配置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="购物设置" name="second">
                <el-form-item label="未支付订单">
                    <div>
                        <el-input v-model="form.close_order_minute" placeholder="未支付订单" type="number">
                            <template #append>
                                分钟后自动关闭
                            </template>
                        </el-input>
                        <small class="text-gray-500 flex mt-1">
                            订单下单未付款，n分钟后自动关闭，设置0不自动关闭
                        </small>
                    </div>
                </el-form-item>
                <el-form-item label="已发货订单">
                    <div>
                        <el-input v-model="form.auto_received_day" placeholder="已发货订单" type="number">
                            <template #append>
                                天后自动确认收货
                            </template>
                        </el-input>
                        <small class="text-gray-500 flex mt-1">
                            如果在期间未确认收货，系统自动完成收货，设置0不自动收货
                        </small>
                    </div>
                </el-form-item>
                <el-form-item label="已完成订单">
                    <div>
                        <el-input v-model="form.after_sale_day" placeholder="已完成订单" type="number">
                            <template #append>
                                天内允许申请售后
                            </template>
                        </el-input>
                        <small class="text-gray-500 flex mt-1">
                            订单完成后 ，用户在n天内可以发起售后申请，设置0不允许申请售后
                        </small>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="default" @click="toast('演示环境', 'error')">保存</el-button>
                </el-form-item>
            </el-tab-pane>

        </el-tabs>
    </el-card>
</template>

<style scoped></style>
